<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
	<title>Cross-Domain Content Loading Demo</title>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
   	
	<style type="text/css">
		#page-wrap {
			margin: 0 auto;
			width: 700px;
		}
		
		 #content { background: #eee; padding: 10px; width: 450px; font-size: 15px; }
	</style>
</head>
<body>
	<div id="page-wrap">
    
        <h2>Example 1:<br/>Cross-Domain Content Loading Demo</h2>
        
        <p>
           The block below is content loaded from an HTML file <a href="http://www.tkcnc.com/iframe_test/source.html">located on a different server</a>
	   using hidden and dynamically created iframe.
           The source file sets all it's content using window.postMessage method or in window.name variable (up to 2mb or sometimes more) which is then read when iframe is finished loading.
	   After content is loaded, it can than be styled and injected anywhere on page.
        </p>

	<div id="result"></div>
	
	
	<p>Stuff below loaded content.</p>
	
	<script src="jquery.crossdomain.data.js" type="text/javascript"></script>

	<script type="text/javascript">
		$.getRemoteData(
			function(data){
				$("#result").append( data );
			},
			'source.html'
		);

	</script>
	
	</div>
</body>

</html>